<template>
    <div>
        <div v-if="get_chapter_content">
            <navs :titles="titles" :title_url="title_url"/>
            <div class="content">{{get_chapter_content.content.content}}</div>
            <el-button-group class="next-page">
                <router-link :to="{name:'BookRead',params:{book_id:get_chapter_content.chapter.book_id,chapter_index:get_chapter_content.chapter.index-1}}">
                    <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
                </router-link>

                <router-link :to="{name:'BookRead',params:{book_id:get_chapter_content.chapter.book_id,chapter_index:get_chapter_content.chapter.index+1}}">
                    <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </router-link>

            </el-button-group>
        </div>
        <div v-else>
            <navs :titles="titles" :title_url="title_url"/>
            <div class="content" v-text="get_chapter_content"></div>
        </div>
    </div>

</template>

<script>
    import Navs from '../components/navs';
    import {getChapterContent} from "../service/getData";
    export default {
        name: "BookRead",
        components:{
            Navs,
        },
        data(){
            return {
                titles:null,
                title_url:"book_info/"+1,
                get_chapter_content:null,
            }
        },
        methods:{
            async setContent(){
                let get_chapter_content = await getChapterContent(this.$route.params.book_id,this.$route.params.chapter_index);
                // console.log(get_chapter_content.code.length);
                if(get_chapter_content.code == -1){
                    this.get_chapter_content = null;
                    this.titles = "没有更多章节了";
                }else{
                    this.get_chapter_content = get_chapter_content.data;
                    this.titles = get_chapter_content.data.chapter.name.slice(0,25);
                }
                // location.reload();
            }
        },
        // created() {
            // this.setContent();
            /*
            let get_chapter_content = await getChapterContent(this.$route.params.book_id,this.$route.params.chapter_index);
            // console.log(get_chapter_content.code.length);
            if(get_chapter_content.code == -1){
                this.get_chapter_content = null;
                this.titles = "没有更多章节了";
            }else{
                this.get_chapter_content = get_chapter_content.data;
                this.titles = get_chapter_content.data.chapter.name.slice(0,25)
            }
            */

        // },
        watch:{
            "$route.params.chapter_index":{
                immediate:true,
                handler(){
                    this.setContent();
                    // location.reload();
                }
                // location.reload();
            }
        }
    }
</script>

<style scoped>
    .content{
        text-indent: 2.5rem;
        font-size: 1.2rem;
        line-height: 2.5rem;
        padding: 0 0.8rem;
        margin-bottom: 0.5rem;
        margin-top: 2.8rem;
    }
    .next-page {
        display: flex;
        justify-content: space-around;
        margin-bottom: 1.2rem;
    }
</style>